<template>
  <cloudPage>
    <cloudHeader slot="gHeader">
      <view class="grace-header-body">
        <!-- 返回按钮 -->
        <view
          class="grace-header-icons grace-icons icon-arrow-left"
          @tap.stop="handleNavBack"
        ></view>
        <!-- 中间内容 -->
        <view class="grace-header-content-noflex grace-text-center">
          {{ $t("my.safe.editMobile") }}
        </view>
        <!-- 右侧按钮 -->
        <view class="icons grace-icons"></view>
      </view>
    </cloudHeader>

    <view class="gracy-body grace-margin-top grace-padding grace-bg-white">
      <form @submit="formSubmit" class="grace-form">
        <view class="grace-form-item grace-border-b items">
          <text class="text-black grace-form-label">
            {{ $t("my.safe.currentPhoneNumber") }}
          </text>
          <view class="text-gray-900 grace-form-body size-small">
            {{ securedMobile }}
          </view>
        </view>
        <view class="grace-form-item grace-border-b items">
          <view class="grace-form-body my-body" style="width: 300rpx">
            <input
              class="grace-form-input size-small"
              name="code_old"
              type="number"
              :placeholder="$t('account.common.placeholder.captcha')"
              v-model.number="form.code_old"
            />
          </view>

          <cloudSendCode
            v-model="form.mobile_old"
            type="mobile_reset_by_old"
            class="ml-auto"
          ></cloudSendCode>
        </view>

        <view class="grace-form-item grace-border-b items">
          <text class="text-black grace-form-label">
            {{ $t("my.safe.newPhoneNumber") }}
          </text>
          <view class="grace-form-body">
            <input
              class="grace-form-input size-small"
              type="number"
              name="mobile_new"
              :placeholder="$t('my.safe.inputNewPhoneNumber')"
              v-model.number="form.mobile_new"
            />
          </view>
        </view>
        <view class="grace-form-item items">
          <view class="grace-form-body my-body" style="width: 300rpx">
            <input
              type="number"
              class="size-small"
              name="code_new"
              v-model.number="form.code_new"
              :placeholder="$t('account.common.placeholder.captcha')"
            />
          </view>
          <cloudSendCode
            type="mobile_reset"
            v-model="form.mobile_new"
            class="ml-auto"
          ></cloudSendCode>
        </view>
      </form>
    </view>

    <view class="grace-padding grace-margin-top">
      <button type="primary" class="grace-button" @tap.stop="formSubmit">
        {{ $t("my.safe.btn") }}
      </button>
    </view>
  </cloudPage>
</template>

<script>
var graceChecker = require("@/graceUI/jsTools/graceChecker.js");
import { mapActions } from "vuex";
export default {
  data() {
    return {
      form: {
        mobile_old: null,
        mobile_new: null,
        code_new: null,
        code_old: null
      }
    };
  },
  async onLoad() {
    await this.loadUser();
    // console.log(this.$store.state.user.user.mobile);
    this.form.mobile_old = this.$store.state.user.user.mobile;
  },
  methods: {
    ...mapActions("user", ["loadUser", "changeMobile"]),

    async formSubmit() {
      var rule = [
        {
          name: "mobile_old",
          checkType: "phoneno",
          errorMsg: this.$t("account.tips.mobile_not_right")
        },
        {
          name: "mobile_new",
          checkType: "phoneno",
          errorMsg: this.$t("account.tips.mobile_not_right")
        },
        {
          name: "code_new",
          checkType: "numbers",
          checkRule: "6,6",
          errorMsg: this.$t("account.tips.captcha_length")
        },
        {
          name: "code_old",
          checkType: "numbers",
          checkRule: "6,6",
          errorMsg: this.$t("account.tips.captcha_length")
        }
      ];

      var checkRes = graceChecker.check(this.form, rule);
      if (!checkRes) {
        return this.makeToast({ title: graceChecker.error, icon: "none" });
      }
      await this.changeMobile({
        code: this.form.code_old,
        new_mobile: this.form.mobile_new,
        new_code: this.form.code_new
      });

      this.makeToast(this.$t("common.tips.success"));
      setTimeout(() => {
        this.handleNavBack();
      }, 1500);
    }
  },
  computed: {
    securedMobile() {
      return this.form.mobile_old
        ? this.form.mobile_old.slice(0, 3) +
            "****" +
            this.form.mobile_old.slice(7, 11)
        : null;
    }
  }
};
</script>
<style scoped>
page {
  background: #f3f3f3;
}
.grace-form-input .input-placeholder {
  text-align: left;
}
input {
  text-align: left;
}

.items {
  height: 100rpx;
}

.text-blue {
  color: #3681e8;
}
.text-black {
  color: #000000;
}
.input-placeholder {
  color: #bbbbbb;
}

.text-gray-900 {
  color: #999999;
}
.size-small {
  font-size: 28rpx;
}
</style>
